﻿
<!DOCTYPE html>
<html lang="zh-cn" class="fullscreen-bg" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="common/links :: common_header(~{::title},~{},~{})">
    <title>模型管理</title>
</head>
<body>
<!-- 页面加载loading -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form class="layui-form toolbar" id="tableTop" lay-filter="tableTop">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">流程名称:</label>
                        <div class="layui-input-inline">
                            <input name="name" class="layui-input" placeholder="流程名称"/>
                        </div>
                    </div>
                    <div class="layui-inline">&emsp;
                        <button class="layui-btn icon-btn" lay-filter="searchBtn" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>&nbsp;
                        <button shiro:hasPermission="flow_models:create" id="createBtn" class="layui-btn icon-btn" type="button">
                            <i class="layui-icon">&#xe654;</i>新建模型
                        </button>
                        <button shiro:hasPermission="flow_models:export" id="exportBtn" class="layui-btn icon-btn" type="button">
                            <i class="layui-icon">&#xe67d;</i>导出数据
                        </button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="dataTable" lay-filter="dataTable"></table>
        </div>
    </div>
</div>

<!-- 表单弹窗 -->
<script type="text/html" id="formDialog">
    <form id="dataForm" lay-filter="dataForm" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">直属机构:</label>
            <div class="layui-input-block">
                <div id="selectTree" class="ew-xmselect-tree"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">业务类型</label>
            <div class="layui-input-block">
                <select name="category" lay-search>
                    <option value="0" selected>事项审批</option>
                    <option value="1">人事流程</option>
                    <option value="2">合同流程</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">模型名称:</label>
            <div class="layui-input-block">
                <input name="name" placeholder="请输入模型名称" class="layui-input"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">模型标识:</label>
            <div class="layui-input-block">
                <input name="key" placeholder="请输入模型标识" class="layui-input"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注信息</label>
            <div class="layui-input-block">
                <textarea name="description" placeholder="请输入备注信息" class="layui-textarea" maxlength="200"></textarea>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="saveBtn" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>

<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a shiro:hasPermission="flow_models:des" class="layui-btn layui-btn layui-btn-xs" lay-event="des" target="_blank" >在线设计</a>
    <a shiro:hasPermission="flow_models:deploy" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="deployment">部署流程</a>

    <a shiro:hasPermission="flow_models:exportXml" class="layui-btn layui-btn-warm layui-btn-xs" lay-event="exportXml">导出BPMN</a>
    <a shiro:hasPermission="flow_models:delete" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除模型</a>
</script>

<!-- 表格状态列 -->
<script type="text/html" id="deploymentId">
    <p>{{d.deploymentId==null?'<font color="red">未部署</font>':'<font color="green">已部署</font>'}}</p>
</script>

<!-- js部分1 -->
<div th:replace="common/scripts :: common"></div>
<div th:replace="common/scripts :: custom"></div>
<script th:inline="javascript">
    layui.use(['layer', 'form', 'table', 'util', 'laydate', 'tableX','admin','xmSelect', 'treeTable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var laydate = layui.laydate;
        var tableX = layui.tableX;
        var admin = layui.admin;
        var xmSelect = layui.xmSelect;
        var treeTable = layui.treeTable;

        /* 渲染表格 */
        var cols = [
            {type: 'checkbox'},
            {field: 'id', title: '模型ID', width: 80},
            {field: 'category', title: '业务类型',  templet: function (d) {
                    if(d.category === "0"){
                        return "事项审批"
                    }else if(d.category === "1"){
                        return "人事流程"
                    }else if(d.category === "2"){
                        return "合同流程"
                    }else{
                        return "其他流程"
                    }}, align: 'center'},
            {field: 'name', title: '模型名称'},
            {field: 'key', title: '模型标识', width: 130},
            {field: 'revision', title: '版本',align: 'center', width: 60,templet: function (d) {
                    return "v"+d.revision;
                }
            },
            {field: 'deploymentId', title: '是否部署',  templet: '#deploymentId', align: 'center'},
            {field: 'lastUpdateTime', title: '更新时间',templet: function (d) {
                    return util.toDateString(d.createTime);
                }, sort: true, width: 180},
            {title: '操作', toolbar: '#tableBar', align: 'center', minWidth: 330}
        ];

        var insTb = table.render({
            elem: '#dataTable',
            url: 'models/page',
            page: true,
            cellMinWidth: 100,
            cols: [cols],
            done: function () {
                // 绑定鼠标右键
                // tableX.bindCtxMenu('dataTable', shiroBindCtxMenu(shiroDelete,shiroUpdate));
            }
        });

        /* 渲染时间选择 */
        laydate.render({
            elem: 'input[name="dateRange"]',
            type: 'date',
            range: true,
            trigger: 'click'
        });


        /* 表格工具条点击事件 */
        table.on('tool(dataTable)', function (obj) {
            if (obj.event === 'des') { // 在线设计
                window.location.href = "../../editor?modelId="+obj.data.id;
            } else if (obj.event === 'deployment') { // 部署模型
                deployModel(obj.data);
            } else if (obj.event === 'exportXml') { // 导出模型
                resetPsw(obj);
            } else if (obj.event === 'del') { // 删除模型
                doDel(obj.data);
            }
        });

        /* 表格头工具栏点击事件 */
        /* 新建模型 */
        $('#createBtn').click(function () {
            showEditModel();
        });
        /* 导入模型 */
        $('#importBtn').click(function () {
            var checkRows = table.checkStatus('dataTable');
            if (checkRows.data.length === 0) {
                layer.msg('请选择要导出的数据', {icon: 2});
            } else {
                tableX.exportDataX({
                    cols: insTb.config.cols,
                    data: checkRows.data,
                    fileName: '导出数据'
                });
            }
        });
        /* 导出excel */
        $('#exportBtn').click(function () {
            var checkRows = table.checkStatus('dataTable');
            if (checkRows.data.length === 0) {
                layer.msg('请选择要导出的数据', {icon: 2});
            } else {
                tableX.exportDataX({
                    cols: insTb.config.cols,
                    data: checkRows.data,
                    fileName: '导出数据'
                });
            }
        });


        // 部署模版
        function deployModel(data) {
            $.post('models/deployment',{id:data.id}, function (res) {
                if (res.code == 0) {
                    layer.msg(res.msg, {icon: 1});
                    insTb.reload({page: {curr: 1}});
                } else {
                    layer.msg(res.msg, {icon: 2});
                }

            }, 'json');
        }

        // 显示编辑弹窗
        function showEditModel() {
            admin.open({
                type: 1,
                area: '800px',
                title: ('创建新模型'),
                content: $('#formDialog').html(),
                shadeClose:true,
                success: function (layero, dIndex) {

                    form.on('submit(saveBtn)', function (data) {
                        data.field.tenantId = insDeptXmSel.getValue('valueStr');
                        $.post('models/create', data.field, function (res) {
                            if (res.code == 0) {
                                layer.close(dIndex);
                                layer.msg(res.msg, {icon: 1});
                                insTb.reload({page: {curr: 1}});
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'json');
                        return false;
                    });

                    var insDeptXmSel;
                    $.get('../rbac/dept/list', function (res) {
                        if (res.code === 0) {
                            for (var i = 0; i < res.data.length; i++) {
                                res.data[i].title = res.data[i].name;
                                res.data[i].id = res.data[i].id;
                                res.data[i].spread = true;
                            }
                            treeData = treeTable.pidToChildren(res.data, 'id', 'pid');
                            // 渲染下拉树
                            insDeptXmSel = xmSelect.render({
                                el: '#selectTree',
                                height: '250px',
                                data: treeData,
                                initValue: [1],
                                model: {label: {type: 'text'}},
                                prop: {
                                    name: 'name',
                                    value: 'id'
                                },
                                radio: true,
                                clickClose: true,
                                tree: {
                                    show: true,
                                    indent: 15,
                                    strict: false,
                                    expandedKeys: true
                                }
                            });
                        }else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    },'json');
                    form.render();
                }
            });
        }


        /* 表格搜索 */
        form.on('submit(searchBtn)', function (data) {
            if (data.field.dateRange) {
                var searchDate = data.field.dateRange.split(' - ');
                data.field.startDate = searchDate[0];
                data.field.endDate = searchDate[1];
            } else {
                data.field.startDate = '';
                data.field.endDate = '';
            }
            data.field.dateRange = undefined;
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });


        /* 删除 */
        window.doDel = function(obj){
            if ([[${session.session_runtime}]] == 'demo') return layer.msg('演示环境不允许操作，请联系管理员', {icon: 4});
            layer.confirm('确定要删除选中数据吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
                $.post('models/delete', {
                    id: obj ? obj.id : '',
                    ids: obj.ids ? obj.ids.join(',') : ''
                }, function (res) {
                    layer.close(loadIndex);
                    if (res.code === 0) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload({page: {curr: 1}});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'json');
            });
        }
    });
</script>
</body>
</html>